<template>
  <div>
    <div class="filter-container main-content">
      <el-form
        :inline="true"
        :model="formInline"
        ref="formInline"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="时间(年月)" prop="cid">
              <el-date-picker
                v-model="formInline.time"
                type="month"
                placeholder="选择年月"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="人员姓名" prop="cid">
              <el-input
                v-model="formInline.user"
                placeholder="请输入人员姓名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="small"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-download" size="small"
                >批量导出</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="person-group">
      <div class="person-mark">
        <div
          class="person-mark-item"
          v-for="item in personMarkList"
          :key="item.color"
        >
          <div
            class="person-mark-item-color"
            :style="{
              backgroundColor: item.color,
            }"
          ></div>
          <div class="person-mark-item-name">{{ item.name }}</div>
        </div>
      </div>
      <el-calendar>
        <template slot="dateCell" slot-scope="{ data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "张三" : "" }}
          </p>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
export default {
  name: "person-trip",
  data() {
    return {
      formInline: {
        time: "",
        user: "",
      },
      personMarkList: [
        {
          color: "blue",
          name: "培训讲课",
        },
        {
          color: "red",
          name: "请假",
        },
        {
          color: "lightgreen",
          name: "一阶段非现场",
        },
        {
          color: "pink",
          name: "审核员(资格)",
        },
        {
          color: "brown",
          name: "实习审核员(资格)",
        },
        {
          color: "green",
          name: "技术专家(资格)",
        },
        {
          color: "yellow",
          name: "检察员",
        },
      ],
    };
  },
  created() {},
};
</script>

<style lang="less" scoped>
.is-selected {
  color: #1989fa;
}
.person-group {
  margin-top: 20px;
  .person-mark {
    display: flex;
    .person-mark-item {
      display: flex;
      align-items: center;
      margin-right: 10px;
      &-color {
        width: 8px;
        height: 8px;
        margin-right: 5px;
      }
      &-name {
        font-size: 12px;
      }
    }
  }
}
</style>
